<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>获取关注列表 - QiuMoTool</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="author" content="QiuMo">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.min.css" rel="stylesheet">
		<!--对话框-->
		<link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
		<style type="text/css">
			.tou {
				width: 50px;
				height: 50px;
				min-width: 50px;
				min-height: 50px;
				border-radius: 50%;
			}

			th,
			td,
			table {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid p-t-15">

			<div class="row">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-header">
							<h4>获取关注列表</h4>
						</div>
						<div class="card-body">
							<form onsubmit="return false;">
								<div class="form-group row">
									<label for="inputEmail3" class="col-sm-1 col-form-label">用户ID</label>
									<div class="col-sm-11">
										<input type="text" class="form-control" placeholder="请输入用户ID..." id="userid">
									</div>
								</div>
								<div class="form-group row">
									<label for="inputEmail3" class="col-sm-1 col-form-label">查询数量</label>
									<div class="col-sm-11">
										<input type="text" class="form-control" placeholder="请输入查询数量..." id="count">
									</div>
								</div>
								<div class="form-group row">
									<div class="col-sm-10">
										<button  id="check" class="btn btn-primary btn-block">查 询</button>
									</div>
								</div>
							</form>
						</div>
						<div class="card-body" style="display: none;" id="table">
							<table class="table table-bordered table-hover">
								<thead>
									<tr>
										<th>头像</th>
										<th>昵称</th>
										<th>ID</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="content">
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<!--对话框-->
		<script src="js/jconfirm/jquery-confirm.min.js"></script>
		<!--消息提示-->
		<script src="js/bootstrap-notify.min.js"></script>
		<script type="text/javascript" src="js/lightyear.js"></script>
		<script type="text/javascript" src="js/main.min.js"></script>
		<script type="text/javascript">
			function copy(id) {
				var flag = copyText(id); //这个必须在DOM对象的事件线程中执行
				if (flag) {
					lightyear.notify('复制成功！', 'success', 100,
						'mdi mdi-emoticon-happy', 'top', 'center');
				}
			}
			$("#check").click(function() {
				let userid = $("#userid").val();
				if(userid == ''){
					lightyear.notify('ID不可为空', 'danger', 1000, 'mdi mdi-emoticon-happy', 'top', 'center');
					return;
				}
				let count = $("#count").val();
				if(count == ''){
					count = 10
				}
				if(count > 50){
					lightyear.notify('一次最多查询50条', 'danger', 1000, 'mdi mdi-emoticon-happy', 'top', 'center');
					return;
				}
				lightyear.loading('show');
				$.get("./api/postid.php", {
					"action": "getfriendship",
					"userid": userid,
					"count": count
				}, function(res) {
					lightyear.loading('hide');
					if (res.code == 200) {
						let html = "";
						for (var i = 0; i < res.msg.length; i++) {
							var user = res.msg[i];
							html += `
							<tr>
								<td><img src="${user.user.avatar}"
										class="tou"></td>
								<td>${user.user.nick}</td>
								<td style="color:red;">${user.user.userID}</td>
								<td><button class="btn btn-sm btn-round btn-success" onclick="copy(${user.user.userID})">复制ID</button></td>
							</tr>
							`;
						}
						$("#content").html(html);
						$("#table").css("display", "block");
					} else {
						lightyear.notify(res.msg, 'danger', 1000, 'mdi mdi-emoticon-happy', 'top', 'center');
					}
				}, "json");
				lightyear.loading('hide');
			});
			function copyText(text) {
				var textarea = document.createElement("textarea");
				var currentFocus = document.activeElement;
				document.body.appendChild(textarea);
				textarea.value = text;
				textarea.focus();
				if (textarea.setSelectionRange) {
					textarea.setSelectionRange(0, textarea.value.length);
				} else {
					textarea.select();
				}
				try {
					var flag = document.execCommand("copy");
				} catch (eo) {
					var flag = false;
				}
				document.body.removeChild(textarea);
				currentFocus.focus();
				return flag;
			}
		</script>
	</body>
</html>
